<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />

	<title>Demo jQuery plugin usableFields</title>
  
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script type="text/javascript" src="jquery.usablefields.js"></script>
  <style type="text/css">
    body {font-family: Arial, Verdana, Geneva, Helvetica, sans-serif; font-size: 0.66em}
    #page {margin: 0 auto; width: 960px;}
    fieldset{margin: 15px 0; padding: 10px; border: 1px solid #E3E3E3}
    legend { font-size: 13px; font-weight: bold }
    label {display: inline-block; width: 140px; vertical-align: top; margin: 2px 0;}
    input, textarea {width: 300px; border: 1px solid #A3A3A3; font-size: 11px; margin: 2px 0;border-radius: 5px;-moz-border-radius: 5px; padding: 2px;}
    #cac3 {width: 20px;; border: none;}
    textarea {height 50px;}
    .blurClass {color: #D3D3D3;}
    input:focus, textarea:focus, .focusClass{background-color: #EDFFF8; border-color: #3E9F7B; -moz-box-shadow: 1px 1px 2px #3E9F7B; -webkit-box-shadow: 3px 3px 2px #3E9F7B;}
    pre {font-family: Courier New, Courier, mono;}
    fieldset {float: left; height:160px; margin: 10px 2px; width: 450px;}
  </style>
  <script type="text/javascript">
    $(document).ready(function () {
      
      $('#demoForm_title').usableFields({display: 'title', hideLabel: false, focusClass: 'focusClass', blurClass: 'blurClass'});
      $('#demoForm_label').usableFields({display: 'label', hideLabel: false, focusClass: 'focusClass'});
      $('#demoForm_labelHide').usableFields({display: 'label', hideLabel: true, focusClass: 'focusClass'});
      $('#demoForm_class').usableFields({display: '.help', hideLabel: false, focusClass: 'focusClass'});
      
    });
    
  </script>
</head>
<body>
<div id="page">
  <h1>Demo jQuery plugin usableFields v0.6</h1>
  <h2>require jQuery 1.3+</h2>
<form id="demoForm_title" action="">
  <fieldset>
    <legend>With title attribute</legend>

  <label for="username">Username</label>
  <input type="text" id="username" title="Your username" value="" class="required" /><br />
  <label for="pass">Password</label>
  <input type="password" id="pass" title="Your secure password" value="" class="required" /><br />
  <label for="comment">Comment</label>
  <textarea id="comment" title="Write a comment" cols="" rows=""></textarea>
  </fieldset>
  <fieldset>
    <legend>Use</legend>
    <pre>&lt;script type="text/javascript"&gt;
  options = { display: 'title', 
              focusClass: 'focusClass', 
              hideLabel: false,  
              blurClass: 'blurClass'
            };
  $('#demoForm_title').usableFields(options);
&lt;/scrip&gt;</pre>
  </fieldset>
</form>

<form id="demoForm_label" action="">
  <fieldset>
    <legend>With label</legend>
  <label for="username2">Username</label>
  <input type="text" id="username2" title="Your username" value="" /><br />
  <label for="pass2">Password</label>
  <input type="password" id="pass2" title="Your secure password" value="" /><br />
  <label for="comment2">Comment</label>
  <textarea id="comment2" title="Write a comment" cols="" rows=""></textarea>
  </fieldset>
  <fieldset>
    <legend>Use</legend>
    <pre>&lt;script type="text/javascript"&gt;
  options = { display: 'label', 
              hideLabel: false, 
              focusClass: 'focusClass'
            };
  $('#demoForm_label').usableFields(options);
&lt;/scrip&gt;</pre>
  </fieldset>
</form>

<form id="demoForm_labelHide" action="">
  <fieldset>
    <legend>With hidden label</legend>
  <label for="username3">Username</label>
  <input type="text" id="username3" title="Your username" value="" /><br />
  <label for="pass3">Password</label>
  <input type="password" id="pass3" title="Your secure password" value="" /><br />
  <label for="cac3">Checkbox</label>
  <input type="checkbox" id="cac3" title="Check the box" value="1" /><br />
  <label for="comment3">Comment</label>
  <textarea id="comment3" title="Write a comment" cols="" rows=""></textarea>
  </fieldset>
  <fieldset>
    <legend>Use</legend>
    <pre>&lt;script type="text/javascript"&gt;
  options = { display: 'label', 
              hideLabel: true, 
              focusClass: 'focusClass'
            };
  $('#demoForm_labelHide').usableFields(options);
&lt;/scrip&gt;</pre>
  </fieldset>
</form>

<form id="demoForm_class" action="">
  <fieldset>
    <legend>With the content of a DOM element next to the input</legend>
  <label for="username4">Username</label>
  <input type="text" id="username4" title="Your username" value="" />
  <div class="help">Username (div)</div>
  <br />
  <label for="pass4">Password</label>
  <input type="password" id="pass4" title="Your secure password" value="" />
  <div class="help">Password (div)</div><br />
  <label for="comment4">Comment</label>
  <textarea id="comment4" title="Write a comment" cols="" rows=""></textarea>
  <div class="help">Comment (div)</div>
  </fieldset>
  <fieldset>
    <legend>Use</legend>
    <pre>&lt;script type="text/javascript"&gt;
  options = { display: '.help', 
              focusClass: 'focusClass'
            };
  $('#demoForm_class').usableFields(options);
&lt;/scrip&gt;</pre>
  </fieldset>
</form>

</div>

</body>
</html>
